<template>
  <div class="home-container">
    <Input
      v-model="inputValue"
      placeholder="请输入任务"
      style="width: 400px"
      @on-change="inputValueChange"
    />
    <Button type="primary" class="margin-left" @click="addTips"
      >添加事项</Button
    >
    <!-- 列表数据 -->
    <List footer="Footer" border class="List">
      <ListItem class="listitem" v-for="item in infoList" :key="item.id"
        ><Checkbox v-model="item.done" @on-change="checkChange($event,item.id)">{{
          item.info
        }}</Checkbox>
        <template slot="action"
          ><li>
            <a href="javascript:;" @click="deleteItemById(item.id)">删除</a>
          </li></template
        >
      </ListItem>
      <!-- 底部 -->
      <template slot="footer">
        <div class="flex">
          <p>{{ unDoneLength }}条剩余</p>
          <!-- 选择按钮 -->
          <RadioGroup
            v-model="radioValue"
            type="button"
            size="small"
            button-style="solid"
            @on-change="radioChange"
          >
            <Radio label="all">全部</Radio>
            <Radio label="complete">已完成</Radio>
            <Radio label="unfinished">未完成</Radio>
          </RadioGroup>
          <a href="javascript:;" @click="clearDone">清除已完成</a>
        </div>
      </template>
    </List>
  </div>
</template>

<script>
// 按需导入vuex中的mapState函数
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  name: 'Home',
  data() {
    return {
      // 复选框按钮组的值
      fruit: [],
      // 单选框组的值
      radioValue: ''
    }
  },
  methods: {
    // 使用vuex的mapMutations函数将store中的mutations节点的addTipsToList函数映射到methods中
    ...mapMutations(['addTipsToList']),
    inputValueChange(event) {
      console.log(event.target.value)
      // 触发（调用）store的mutations中的setInputValue方法,并传入输入框的值
      this.$store.commit('setInputValue', event.target.value)
    },
    // 添加事项
    addTips() {
      // 判断输入框内容是否为空，如果为空不进行添加操作
      if (this.inputValue.trim().length <= 0) {
        return this.$Message.warning('请输入内容')
      }
      this.addTipsToList()
    },
    // 删除事项
    deleteItemById(id) {
      this.$store.commit('removeItem', id)
    },
    // 当复选框的值发生变化会触发该函数
    checkChange(e, id) {
      console.log(e)
      console.log(id)
      this.$store.commit('getNewCheckValue', id, e)
    },
    // 清除已完成的事项
    clearDone() {
      this.$store.commit('cleanDone')
    },
    // 点击显示不同的数据
    radioChange(val) {
      this.$store.commit('setRadio', val)
    }
  },
  created() {
    // 调用store的actions中的异步方法getList
    this.$store.dispatch('getList')
  },
  computed: {
    // 使用vuex的mapState函数将store中的state中的list、inputValue映射为计算属性
    ...mapState(['list', 'inputValue']),
    ...mapGetters(['unDoneLength', 'infoList'])
  }
}
</script>

<style lang="less" scoped>
.home-container {
  width: 520px;
}
.margin-left {
  margin-left: 15px;
}

.List {
  width: 400px;
  margin-top: 15px;
}

.listitem {
  position: relative;
  width: 100%;
}

.ivu-list-item-action > li {
  position: absolute;
  top: 13px;
  right: 15px;
  display: inline-block;
  /* padding: 0 8px; */
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  /* line-height: 22px; */
  /* text-align: center; */
  cursor: pointer;
}

.flex {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
